<template>
  <view class="match-model-manage-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">{{ matchId ? `${matchName} - 比赛模式管理` : '比赛模式管理' }}</text>
      <text class="page-subtitle">{{ matchId ? '管理该赛事的比赛模式和规则' : '管理比赛模式和规则' }}</text>
    </view>
    <!-- 操作按钮 -->
    <view class="action-section">
      <button class="create-btn" @click="goToCreateModel">创建模式</button>
      <button class="schedule-model-btn" @click="goToScheduleModel">赛程模式管理</button>
    </view>
    
    <!-- 模式列表 -->
    <view class="model-list-section">
      <view class="list-header">
        <text class="section-title">模式列表</text>
        <text class="list-count">共 {{ modelList.length }} 个模式</text>
      </view>
      
      <view class="model-list">
        <view 
          class="model-item" 
          v-for="model in modelList" 
          :key="model.matchModelId"
        >
          <view class="model-header">
            <text class="model-name">{{ model.matchModelName || model.nameTemplate || `模式${model.matchModelId}` }}</text>
            <view class="model-actions">
              <button class="action-btn edit-btn" @click="goToEditModel(model)">编辑</button>
              <button class="action-btn delete-btn" @click="deleteModel(model)">删除</button>
            </view>
          </view>
          
          <view class="model-info">
            <view class="info-row">
              <text class="info-label">模式ID:</text>
              <text class="info-value">{{ model.matchModelId || model.id }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">赛事ID:</text>
              <text class="info-value">{{ model.matchId || '未设置' }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">模式名称:</text>
              <text class="info-value">{{ model.matchModelName || '未设置' }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">名称模板:</text>
              <text class="info-value">{{ model.nameTemplate || '未设置' }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">赛程模式ID:</text>
              <text class="info-value">{{ model.matchScheduleModelId || '未设置' }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">创建方式:</text>
              <text class="info-value">{{ getCreateTypeText(model.matchScheduleCreateType) }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">触发类型:</text>
              <text class="info-value">{{ getTriggerTypeText(model.triggerType) }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">下次触发时间:</text>
              <text class="info-value">{{ formatDate(model.nextTriggerTime) }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">比赛开始时间:</text>
              <text class="info-value">{{ formatDate(model.matchStartTime) }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">比赛结束时间:</text>
              <text class="info-value">{{ formatDate(model.matchEndTime) }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">创建时间:</text>
              <text class="info-value">{{ formatDate(model.createTime) }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 加载状态 -->
    <view class="loading-overlay" v-if="loading">
      <view class="loading-content">
        <view class="loading-spinner"></view>
        <text class="loading-text">加载中...</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { MatchModelAPI } from '@/api/battle.js'

// 响应式数据
const loading = ref(false)
const matchId = ref('') // 当前赛事ID
const matchName = ref('') // 当前赛事名称

// 模式列表
const modelList = ref([])

// 创建方式选项
const createTypeOptions = ['手动创建', '自动创建', '定时创建']

// 处理URL参数
onLoad((options) => {
  if (options.matchId) {
    matchId.value = options.matchId
  }
  if (options.matchName) {
    matchName.value = decodeURIComponent(options.matchName)
  }
})

// 获取创建方式文本
const getCreateTypeText = (type) => {
  return createTypeOptions[type] || '未知'
}

// 获取触发类型文本
const getTriggerTypeText = (type) => {
  const triggerTypeTextMap = {
    1: '每日触发',
    2: '每周触发',
    3: '每月触发',
    0: '自定义触发'
  }
  return triggerTypeTextMap[type] || '未知'
}

// 加载模式列表
const loadModelList = async () => {
  loading.value = true
  try {
    // 构建查询参数
    const params = {
      pageNum: 0,
      pageSize: 100,
      delFlag: 0
    }
    
    // 如果指定了赛事ID，则只查询该赛事的模式
    if (matchId.value) {
      params.matchId = matchId.value
    }
    
    const result = await MatchModelAPI.page(params)
    
    console.log('获取比赛模式列表结果:', result)
    
    if (result.code === 0) {
      modelList.value = result.data?.list || result.data || []
    } else {
      throw new Error(result.msg || '获取模式列表失败')
    }
  } catch (error) {
    console.error('加载模式列表失败:', error)
    uni.showToast({
      title: error.message || '加载失败',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 跳转到创建模式页面
const goToCreateModel = () => {
  let url = '/views/match-model-form'
  if (matchId.value) {
    url += `?matchId=${matchId.value}`
    if (matchName.value) {
      url += `&matchName=${encodeURIComponent(matchName.value)}`
    }
  }
  uni.navigateTo({ url })
}

// 跳转到编辑模式页面
const goToEditModel = (model) => {
  const modelId = model.matchModelId || model.id
  let url = `/views/match-model-form?mode=edit&id=${modelId}`
  if (matchId.value) {
    url += `&matchId=${matchId.value}`
    if (matchName.value) {
      url += `&matchName=${encodeURIComponent(matchName.value)}`
    }
  }
  uni.navigateTo({ url })
}

// 删除模式
const deleteModel = (model) => {
  uni.showModal({
    title: '确认删除',
    content: `确定要删除模式 "${model.matchModelName || model.nameTemplate || model.matchModelId}" 吗？`,
    success: async (res) => {
      if (res.confirm) {
        try {
          const result = await MatchModelAPI.remove({
            matchModelId: model.matchModelId
          })
          
          if (result.code === 0) {
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            })
            loadModelList()
          } else {
            throw new Error(result.msg || '删除失败')
          }
        } catch (error) {
          console.error('删除模式失败:', error)
          uni.showToast({
            title: error.message || '删除失败',
            icon: 'none'
          })
        }
      }
    }
  })
}

// 格式化日期
const formatDate = (timestamp) => {
  if (!timestamp) return '未设置'
  const date = new Date(timestamp)
  return date.toLocaleString('zh-CN')
}

// 跳转到赛程模式管理页面
const goToScheduleModel = () => {
  uni.navigateTo({
    url: '/views/schedule-model-manage'
  })
}

// 页面加载时获取模式列表
onMounted(() => {
  loadModelList()
})

// 页面显示时刷新列表
onShow(() => {
  loadModelList()
})
</script>

<style lang="scss" scoped>
.match-model-manage-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40rpx;
}

.page-header {
  text-align: center;
  margin-bottom: 60rpx;
  
  .page-title {
    display: block;
    font-size: 48rpx;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20rpx;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
  }
  
  .page-subtitle {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
  }
}

.action-section {
  margin-bottom: 40rpx;
  display: flex;
  gap: 20rpx;
  
  .create-btn {
    flex: 1;
    height: 80rpx;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    border-radius: 12rpx;
    color: #fff;
    font-size: 28rpx;
    font-weight: bold;
  }
  
  .schedule-model-btn {
    flex: 1;
    height: 80rpx;
    background: linear-gradient(135deg, #fd7e14 0%, #ff8c00 100%);
    border: none;
    border-radius: 12rpx;
    color: #fff;
    font-size: 28rpx;
    font-weight: bold;
  }
}

.model-list-section {
  .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #fff;
    }
    
    .list-count {
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.8);
    }
  }
  
  .model-list {
    .model-item {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 20rpx;
      padding: 40rpx;
      margin-bottom: 30rpx;
      box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
      
      .model-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;
        
        .model-name {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
        
        .model-actions {
          display: flex;
          gap: 15rpx;
          
          .action-btn {
            height: 50rpx;
            padding: 0 20rpx;
            border: none;
            border-radius: 8rpx;
            font-size: 24rpx;
            
            &.edit-btn {
              background: #007bff;
              color: #fff;
            }
            
            &.delete-btn {
              background: #dc3545;
              color: #fff;
            }
          }
        }
      }
      
      .model-info {
        .info-row {
          display: flex;
          margin-bottom: 15rpx;
          
          .info-label {
            width: 160rpx;
            font-size: 26rpx;
            color: #666;
          }
          
          .info-value {
            flex: 1;
            font-size: 26rpx;
            color: #333;
          }
        }
      }
    }
  }
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  
  .loading-content {
    background: #fff;
    border-radius: 20rpx;
    padding: 60rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .loading-spinner {
      width: 60rpx;
      height: 60rpx;
      border: 4rpx solid #f3f3f3;
      border-top: 4rpx solid #667eea;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 20rpx;
    }
    
    .loading-text {
      font-size: 28rpx;
      color: #666;
    }
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style> 